<!-- 新增/编辑电子签章校验配置弹框 -->
<template>
  <div class="addVerifyUnit">
    <div ref="queryFormBox" class="clearfix search-flex-box pms-queryShow">
      <MyForm ref="formRef" v-model="fromValue" :is-mar-top="true" :select-list="dicLists" :form-option="addFormOption">
        <template #orgId>
          <div @click="activeUnit">
            <el-input v-model="fromValue.customCheck" :readonly="true" placeholder="请选择">
              <i slot="suffix" class="el-icon-more" />
            </el-input>
          </div>
        </template>
      </MyForm>
    </div>
    <el-dialog
      v-dialogDrag
      title="选择参与者"
      :append-to-body="true"
      :modal-append-to-body="true"
      :modal="true"
      :close-on-click-modal="false"
      width="30%"
      class="pms-dialog"
      :visible.sync="dialogUnit"
    >
      <div class="dialogForm">
        <ChooseUnit ref="chooseUnitRef" v-model="fromValue.orgId" :is-edit-unit="isEditUnit" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="verifyUnit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addFormOption } from '.'
import ChooseUnit from './chooseUnit.vue'
import MyForm from '@/components/basic/myForm'
import { queryOrgApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'

export default {
    name: 'AddVerifyUnit',
    components: {
        MyForm,
        ChooseUnit
    },
    props: {
        dicLists: {
            type: Object,
            default: () => ({})
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        editCheckId: {
            type: Number,
            default: null
        },
        itemInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            // 表单数据
            fromValue: {},
            // 参数配置
            addFormOption,
            isEditUnit: false, // 是否编辑单位
            dialogUnit: false
        }
    },
    created() {
        addFormOption.itemData.forEach(item => {
            const defaultVal = this.itemInfo[item.prop] ?? null
            if (item.prop === 'orgId') {
                item.value = this.editCheckId ? this.itemInfo.orgId.toString().split().map(item_ => +item_) : []
            } else {
                item.value = this.editCheckId ? defaultVal : ''
            }
        })
    },
    mounted() {
        if (this.isEdit) {
            this.orgInfo()
        }
    },
    methods: {
        // 获取编辑回显数据
        orgInfo() {
            const orgName = this.dicLists['BUILD_UNIT'].find(item => item.orgId === this.fromValue.orgId['0']).orgName
            this.$set(this.fromValue, 'customCheck', orgName)
            console.log(this.fromValue, 'this.fromValue')
        },
        // 表单校验
        formValidate() {
            let flag = false
            this.$refs.formRef.$refs.queryFormRef.validate((valid) => {
                flag = valid
                console.log(valid)
            })
            return flag
        },
        // 打开建设单位弹框
        activeUnit() {
            this.isEditUnit = this.isEdit
            this.dialogUnit = true
        },
        // 查询建设单位
        async queryOrg() {
            const res = await queryOrgApi()
            this.$set(this.dicLists, 'BUILD_UNIT', res.data)
        },
        // 建设单位弹框确认
        verifyUnit() {
            const { checkedKeys, checkedNodes } = this.$refs.chooseUnitRef
            this.$set(this.fromValue, 'orgId', checkedKeys)
            const list = checkedNodes.map((item) => item.orgName)
            const customCheck = list.join().replaceAll(',', '、')
            this.$set(this.fromValue, 'customCheck', customCheck || '')
            this.dialogUnit = false
            console.log(checkedKeys, checkedNodes, '确定单位')
        }
    }
}
</script>

<style lang="scss" scoped>
.addVerifyUnit {
    width: 100%;
}

.el-button--primary {
    color: #fff;
}
::v-deep .el-dialog__body {
    max-height: 400px;
    overflow-y: auto;
}
// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
  // 滚动条整体样式
  width: 6px; //高宽分别对应横竖滚动条的尺寸
  height: 10px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #f2f3f5;
}
</style>
